<template>
  <div class="UserOnlinebox">
    <div class="topbox">
      <div class="leftspan">
        <span>账号</span>
        <span><el-input v-model="loginAccount" placeholder="请输入账号" size="small"></el-input></span>
        <span>登录类型</span>
        <span>
          <el-select v-model="loginType" placeholder="请选择登录类型" size="small">
              <el-option  label="web" value="web" ></el-option>
              <el-option  label="app" value="app" ></el-option>
          </el-select>
        </span>
      </div>
      <div>
        <el-button size="small" @click="chongzhi">重置</el-button>
        <el-button type="primary" size="small" @click="xiangqinglist">查询</el-button>
      </div>
    </div>
    <div class="bodybox">
      <div class="title">
        <div>在线用户情况</div>
        <div class="butexp">
           <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
        </div>
      </div>
      <div class="table">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        </TableColumn>
      </div>
    </div>
  </div>
</template>

<script>
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import {getonlineuserlistapi} from '@/api/system/UserOnline'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      loginAccount: '',
      loginType: '',
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', width: '70', center: 'center' },
        {label:'登录账号',prop:'loginAccount' },
        {label:'登录用户',prop:'userNo' },
        {label:'登录时间',prop:'loginTime',center: 'center' ,width:'160'},
        {label:'登录会话ID',prop:'sessionId',showtooltip:true },
        {label:'登录令牌',prop:'tokenId',showtooltip:true },
        {label:'登录机器IP',prop:'clientIp' },
        {label:'登录地址',prop:'serverPath' ,showtooltip:true},
        {label:'登录服务器名称',prop:'serverName' },
        {label:'登录来源', prop: 'loginSource' },
        {label:'登录类型',prop:'loginType' },
      ],
      issize:'medium',
    };
  },

  mounted() {
    this.xiangqinglist()
  },

  methods: {
    // 获取表格数据
    async xiangqinglist() {
      this.$refs.tabledata.loading=true
      const { data: { list } } = await getonlineuserlistapi({
        loginAccount:this.loginAccount,loginType:this.loginType
      })
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('sst-microservice-biz/sst/online/user/situation/export',{
        loginAccount:this.loginAccount,loginType:this.loginType
      },'在线用户情况')
    },
    // 刷新列表
    shuaxin() {
      this.xiangqinglist()
      this.$message.success('列表刷新成功')
    },
    // 重置
    chongzhi(){
      this.loginAccount=''
      this.loginType=''
      this.xiangqinglist()
    },
  },
};
</script>

<style scoped>
.UserOnlinebox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .leftspan{
      display: flex;
      span{
        margin-right: 10px;
        font-size: 14px;
        color: #606266;
      }
    }
  }
  .bodybox{
    height: calc(100% - 90px);
    padding: 20px;
    background-color: #fff;
    .title{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butexp{
        display: flex;
        .moban{margin-right: 10px;}
      }
    }
    .table{
      height: 94%;
    }
  }
}
</style>